<template>
	<view id="app">
		<!-- 自定义头部 -->
		<diyheader title="绑定手机号" background="#FFF7CC" @goback="goback" />

		<!-- 绑定 -->
		<view class="bind">
			<!-- 当前手机号 -->
			<view class="mlr30 pt10 c999 f28" v-if="mobile">当前手机号：{{mobile}}</view>
			<!-- 手机号 信息 -->
			<view class="area mt30 mlr30">
				<view class="w90p mauto c666 f30">
					<view class="df dfsb h100 aic bdb1sE">
						<input type="number" v-model="wrap.mobile" class="w65p" maxlength="11" placeholder="请输入手机号" placeholder-class="f28 c666" />
						<view class="getSms btn sm w180 cff9646 bd1s">
							<getSms />
						</view>
					</view>
					<view class="df dfsb aic lh100">
						<view class="c666 f28">验证码</view>
						<input type="number" maxlength="6" v-model="wrap.captcha" class="w80p tar" placeholder="请输入验证码" placeholder-class="f30 c999" />
					</view>
				</view>
			</view>
			<!-- 提交 -->
			<view class="btn mt30 mlr30 pay" @click="binding">确定</view>
			<!-- 用户须知 -->
			<view class="df dfc aic">
				<view class="read df aic mt30 mlr30 c999 f28" @click="checked = !checked">
					<!-- 按钮 -->
					<view class="check">
						<uni-icons type="checkbox-filled" color="#FFAD65" v-if="checked" size="20"></uni-icons>
						<uni-icons type="circle" color="#ccc" v-if="!checked" size="20"></uni-icons>
					</view>
					<!-- 文字 -->
					<view class="txt">勾选同意</view>
					<!-- 链接 -->
					<navigator class="cff9231" url="/pages/my/imgTxt?type=4" hover-class="none" @click.stop="">《用户协议》</navigator>
					<!-- 链接 -->
					<navigator class="cff9231" url="/pages/my/imgTxt?type=3" hover-class="none" @click.stop="">《隐私政策》</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 定义全局变量
	var that;

	// 自定义头部
	import diyheader from '@/components/diyheader.vue';
	// 获取验证码
	import getSms from '@/components/getSms.vue';

	export default {
		// 声明组件
		components: {
			// 自定义头部
			diyheader,
			// 获取手机号
			getSms,
		},
		// 页面变量
		data() {
			return {
				// 内容
				wrap: {
					mobile: '',
					captcha: '',
				},
				// 是否同意
				checked: false,
				// 手机号
				mobile: '',
				// 进入
				into: '',
			}
		},

		// 获取后
		onLoad(e) {
			// 赋值
			that = this;

			// 判断传参
			if (e.into) {
				that.into = e.into;
			}

			// 获取手机号
			that.getMobile();
		},

		// 方法列表
		methods: {
			// 获取手机号
			getMobile() {
				// 获取用户信息
				that.util.getuserinfo((rs) => {
					// 获取手机号
					that.mobile = rs.data.userinfo.mobile;
				});
			},

			// 返回
			goback() {
				// 判断是否第一次进入
				if (that.into != 1) {
					// 返回跳转
					uni.navigateBack();
				} else {
					// 弹窗提示
					that.alert({
						value: '当前用户未绑定手机号，是否退出登录？',
						success(rs) {
							// 判断是否点击确定
							if (rs.confirm) {
								// 清除登录状态
								uni.removeStorageSync('token');

								// 返回跳转
								uni.navigateBack();
							}
						},
					});
				}
			},

			// 绑定手机号
			binding() {
				// 判断必填项
				if (!that.wrap.mobile) {
					that.alert('请输入手机号');
					return
				} else if (that.wrap.mobile.length < 11) {
					that.alert('请输入正确的手机号');
					return
				} else if (!that.wrap.captcha) {
					that.alert('请输入验证码');
					return
				}
				// 判断有无勾选
				if (!that.checked) {
					// 弹窗提示
					that.alert('请勾选《用户协议》《隐私政策》');
					return;
				}

				// 请求接口 
				that.request({
					url: '/api/user/changemobile',
					// 上传数据
					data: that.wrap,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 弹窗提示
							that.alert('修改绑定成功');

							// 半秒后执行
							setTimeout(() => {
								// 返回跳转
								uni.navigateBack();
							}, 500);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},
		},
	}
</script>
<style>
	/* 绑定手机号 */
	.bind {
		position: fixed;
		top: 11vh;
		/* top: 200rpx; */
		width: 750rpx;
		width: 100vw;
	}
</style>
